<template> 
  <div
    class="application-detail"
    :class="{'has-bottom': (applyInfoDatail.Status === 3 && createdUserReApplyShow) || (applyInfoDatail.Status <= 2 && (applyInfoDatail.Type === 1) && createdUserReApplyShow) || (applyInfoDatail.Status < 2 && (applyInfoDatail.Type === 3) && createdUserReApplyShow) || ((applyInfoDatail.Status === 6 || applyInfoDatail.Status < 2) && (applyInfoDatail.Type === 2) && createdUserReApplyShow)|| ( applyInfoDatail.Status < 2 && (applyInfoDatail.Type === 4) && createdUserReApplyShow)}"
  >
    <div class="scroll-box">
      <my-apply-info :detailData="applyInfoDatail" ref="applyInfo"></my-apply-info>
      <my-apply-process :processData="approvers" :detailData="applyInfoDatail" ref="applyProcess"></my-apply-process>
    </div>
    <!--  审批被驳回的底部  -->
    <my-bottom-re-apply
      v-if="applyInfoDatail.Status === 3 && createdUserReApplyShow"
      :applyType="applyInfoDatail.Type"
    ></my-bottom-re-apply>
    <!--  审批被通过的底部  -->
    <my-bottom-edit-apply
      v-if="applyInfoDatail.Status === 2 && applyInfoDatail.Type === 1 && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply>
    <!--  未审批时的底部  -->
    <my-bottom-edit-apply-before
      v-if="applyInfoDatail.Status === 1 && applyInfoDatail.Type === 1 && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before>
    <!--  保密申请审批中的的底部  -->
    <my-bottom-edit-apply-before
      v-if="applyInfoDatail.Status === 1 && applyInfoDatail.Type === 3 && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before>

    <!-- 合同申请审批中或者带查阅中的底部 -->
    <my-bottom-edit-apply-before
      v-if="(applyInfoDatail.Status === 1 || applyInfoDatail.Status === 6 ) && (applyInfoDatail.Type === 2 || applyInfoDatail.Type === 6) && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before>

    <!-- 密钥申请审批中或者带查阅中的底部 -->
    <my-bottom-edit-apply-before
      v-if="applyInfoDatail.Status === 1 && applyInfoDatail.Type === 4 && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before>

    <!-- 例假申请审批中 -->
    <my-bottom-edit-apply-before
      v-if="applyInfoDatail.Status === 1 && applyInfoDatail.Type === 5 && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before>

    <!-- 付外佣申请审批中 -->
    <my-bottom-edit-apply-before
      v-if="applyInfoDatail.Status === 1 && applyInfoDatail.Type === 6 && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before> 


    <!-- <my-bottom-edit-apply-before
      v-if="(applyInfoDatail.Status === 1 || applyInfoDatail.Status === 6) && (applyInfoDatail.Type === 1 || applyInfoDatail.Type === 2 || applyInfoDatail.Type === 3 || applyInfoDatail.Type === 4) && createdUserReApplyShow"
      :startDate="applyInfoDatail.Content.StartDate"
    ></my-bottom-edit-apply-before> -->

    <toast v-model="toastShow" :text="toastText" type="text" class="toast-normal" :time="3000"></toast>
    <!-- 加载中 -->
    <loading class="loading-mask" :show="loadingShow" text="加载中..."></loading>
  </div>
</template>

<script>
import { TransferDom, Toast, Loading } from "vux";
import ApplyInfo from "@/components/ApplyDetail/ApplyInfo.vue";
import ApplyProcess from "@/components/ApplyDetail/ApplyProcess.vue";
import BottomReApply from "@/components/Bottom/BottomReApply.vue";
import BottomEditApply from "@/components/Bottom/BottomEditApply.vue";
import BottomEditApplyBefore from "@/components/Bottom/BottomEditApplyBefore.vue";
export default {
  name: "ApplicationDetail",
  data() {
    return {
      toastShow: false, // 是否顯示提示框
      toastText: "", // 提示框文字
      loadingShow: true,
      // ApplyInfo組件 所需數據模型
      applyInfoDatail: {
        CreatedImage: "",
        CreatedNameCh: "",
        CreatedNameEn: "",
        CreatedStaffNo: "",
        CreatedTime: "",
        KeyId: "",
        TurndownRemark: "",
        Status: "",
        Type: "",
        Content: "",
        Copiers: [],
        CancelDateTime: "",
        ApplyNo: "",
      },
      // 審批人
      approvers: [],
      createdUserReApplyShow: false, // 当前登录用户是否为创建该申请的用户
    };
  },
  components: {
    Toast,
    Loading,
    "my-apply-info": ApplyInfo,
    "my-apply-process": ApplyProcess,
    "my-bottom-re-apply": BottomReApply,
    "my-bottom-edit-apply": BottomEditApply,
    "my-bottom-edit-apply-before": BottomEditApplyBefore,
  },
  directives: {
    TransferDom,
  },
  mounted() {
    this.$parent.initPromise.then(() => {
      this.getItemDetail();
    });
  },
  methods: {
    getItemDetail: function () {
      // console.log(JSON.parse(paramsStr));
      let itemDetailKeyId = JSON.parse(
        this.$route.query.item.replace(/[\\]/g, "")
      ).KeyId;
      // let itemDetailKeyId = JSON.parse(this.$route.query.item).KeyId;
      this.axios
        .post(`/Process/Get?keyId=${itemDetailKeyId}`)
        .then((res) => {
          // console.log('详细data', res); 

          // let str = {
          //     data: {
          //       KeyId: "21857c96-9115-4b49-be4f-c9f644c5356f",
          //       Type: 2,
          //       Status: 2,
          //       Content: {
          //         projectName:"大茶饭",
          //         areaCode: "+86",
          //         clientName: "qad",
          //         company: "dsa",
          //         telephone: "13427786598",
          //         mobilePhone: "13427786598",
          //         faxTelephone: "12",
          //         email: "",
          //         address: "13427786598",
          //         relatedProperties: "13427786598",
          //         PropertyID: "dsa",
          //         isOwner: false,
          //         isClient: true,
          //         transactionInfo: false,
          //         confidentialityReasons: "sda",
          //         remarks: "",
          //         ReApplyReason: null,
          //         EditApplyReason: null,
          //         EditApplyDateReason: null,
          //         Files: ["http://baidu.com/dingding_附件一.png","附件二.png"],
          //       },
          //       TurndownRemark: null,
          //       CreatedStaffNo: "10829",
          //       CreatedNameCh: "黎偉杰",
          //       CreatedNameEn: "Adam Lai",
          //       CreatedImage:
          //         "http://wework.qpic.cn/bizmail/eiaCeiaEYmBHia5B8nI5s0asbFAibibln2WVibntW0eQK8Z9Ge5CvIYaibCiag/0",
          //       CreatedTime: "2020-08-06T10:12:37.047",
          //       Approvers: [
          //         {
          //           Image:
          //             "http://wework.qpic.cn/bizmail/zicFlZMVCFum5yBrlFxrztdSmrib9EX3VLjBAylqrTf7ia3h01zUic4tVQ/0",
          //           StaffNo: "10463",
          //           NameCh: "李肇成",
          //           NameEn: "Jack Lei",
          //           Status: 6,
          //           CheckRemark: "申请条目合理",
          //           Remark: null,
          //           TurndownRemark: null,
          //           ModifiedTime: null,
          //           Verify: false,
          //           Files:["dongdongdongding.png","222.word"]
          //         },
          //         {
          //           Image: null,
          //           StaffNo: "6666888",
          //           NameCh: "虚拟账号",
          //           NameEn: "TestCode",
          //           CheckRemark:null,
          //           Status: 2,
          //           Remark: "Lorem ipsum dolor sit amet consectetur ",
          //           TurndownRemark: null,
          //           ModifiedTime: null,
          //           Verify: false,
          //           Files:["http://baidu.com_dingding.png","132.jpg"]
          //         },
          //       ],
          //       Copiers: [
          //         {
          //           StaffNo: "10822",
          //           NameCh: "蔡芳芳",
          //           NameEn: "Toby Choi",
          //           Image:
          //             "http://wework.qpic.cn/bizmail/iar1EkqotXEzkEPh8Y2fwibvQEC5iapgRfa1EfjD68iawXXnhqeSBdfOfA/0",
          //         },
          //       ],
          //       CancelDateTime: null,
          //       IsReApply: false,
          //       ApplyNo: "TRA_M.U202008012",
          //     },
          //     IsSuccess: true,
          //     ExMessage: null,
          //     CreatedTime: "2020-08-10T12:10:38.0017886+08:00",
          //   };
          // res.data = str;
          this.loadingShow = false;
          if (res.data.IsSuccess === true) {
            for (let prop in this.applyInfoDatail) {
              this.applyInfoDatail[prop] = res.data.data[prop];
            }
            // console.log('applyInfoDatail', this.applyInfoDatail);
            this.approvers = res.data.data.Approvers;
            for(var item of res.data.data.Approvers){
              if(item.Content){
                let content = JSON.parse(item.Content)
                item.Content = content
              }
            }
            this.$refs.applyInfo.parseParams();
            this.isCreatedUser();
          } else {
            this.toastText = `加载失败，错误信息：${res.data.ExMessage}`;
            this.toastShow = true;
          }
        })
        .catch((err) => {
          this.loadingShow = false;
          this.toastText = `加载失败，错误信息：${err}`;
          this.toastShow = true;
        });
    },
    isCreatedUser: function () {
      let createdStaffNo = this.applyInfoDatail.CreatedStaffNo;
      let loginUserInfo = this.getUserInfo();
      if (createdStaffNo === loginUserInfo.StaffNo) {
        this.createdUserReApplyShow = true;
      } else {
        this.createdUserReApplyShow = false;
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.name === "ApplicationList") {
      to.meta.keepAlive = true;
    }
    this.$destroy();
    next();
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/variable";

.application-detail {
  padding-top: 44px;
}
.has-bottom {
  padding-bottom: getRem(98);
}
.not-bottom {
  margin-bottom: getRem(150);
}
</style>
